<template>
  <header class="site-header">
    <div class="logo-container">
      <router-link to="/">
        <img src="@/assets/images/logo.png" alt="Logo" class="logo-img" />
      </router-link>
    </div>
  </header>
  <el-main class="header">
    <div class="logo">
      <img src="https://basic.smartedu.cn/img/logo-new-default.59a73b97.png" alt="国家中小学智慧教育平台" class="header-logo" />
    </div>
  </el-main>
  <nav class="main-nav">
    <el-menu mode="horizontal" :router="true" class="menu-list" :default-active="activeMenu">
      <el-menu-item v-for="item in menuItems" :key="item.route" :index="item.route" @click="setActiveMenu(item.route)">
        <span class="menu-text">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>

    <div class="search-user">
      <!-- 搜索按钮 -->
      <el-button class="search-button" @click="goToSearchPage">
        <ElIcon :size="20" class="search-icon">
          <Search />
        </ElIcon>
        <span class="sr-only">搜索</span> <!-- 用于屏幕阅读器 -->
      </el-button>

      <!-- 用户信息 -->
      <div class="user-info">
        <el-image
            v-if="userInfo.avatarPath"
            :src="toAddressable(userInfo.avatarPath)"
            fit="cover"
            border-radius="50%"
            style="margin-top: 5px; width: 50px; height: 50px; border-radius: 50%; padding: 20px;"
            alt="用户头像"
        />
        <span class="username">{{ userInfo.username }}</span>
        <el-dropdown @command="handleCommand">
          <el-button class="user-center-button" type="text">
            用户中心
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
<!--              <el-dropdown-item>个人中心</el-dropdown-item>-->
              <el-dropdown-item>
                <router-link to="/usercenter" style="text-decoration: none; color: black;">账号设置</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/chat" style="text-decoration: none; color: black;">聊天</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useUserStore } from '@/store/useUserStore';
import { useResource } from "@/hooks/useResource";
import { useRouter, useRoute } from 'vue-router';
import { ElMenu, ElMenuItem, ElScrollbar, ElButton, ElInput, ElImage, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon } from 'element-plus';
import 'element-plus/es/components/menu/style/css';
import 'element-plus/es/components/menu-item/style/css';
import 'element-plus/es/components/scrollbar/style/css';
import 'element-plus/es/components/button/style/css';
import 'element-plus/es/components/input/style/css';
import 'element-plus/es/components/image/style/css';
import 'element-plus/es/components/dropdown/style/css';
import 'element-plus/es/components/dropdown-menu/style/css';
import 'element-plus/es/components/dropdown-item/style/css';
import 'element-plus/es/components/icon/style/css';
import { Search, House } from '@element-plus/icons-vue';

// 定义菜单项数据
const menuItems = ref([
  { name: '首页', route: '/homeview' },
  { name: '推荐', route: '/recommended' },
  { name: '德育', route: '/moral' },
  { name: '课程教学', route: '/course' },
  { name: '体育', route: '/sports' },
  { name: '美育', route: '/arts' },
  { name: '劳动教育', route: '/labor' },
  { name: '课后服务', route: '/afterschool' },
  // { name: '特殊教育', route: '/specialEdu' },
  // { name: '教师研修', route: '/teacherTrainingNav' },
  // { name: '家庭教育', route: '/family' },
  // { name: '教改经验', route: '/eduReform' },
  // { name: '教材', route: '/textbooks' },
  { name: '地方频道', route: '/homeview/sicuan' }
]);

// 用户信息和资源处理
const userStore = useUserStore();
const { toAddressable } = useResource();

// 获取当前路由
const router = useRouter();
const route = useRoute();

// 激活的菜单项
const activeMenu = computed(() => {
  return route.path;
});

// 设置激活的菜单项
const setActiveMenu = (route) => {
  activeMenu.value = route;
};

// 用户信息
const userInfo = computed(() => userStore.userInfo);

// 处理下拉菜单命令
const handleCommand = (command) => {
  // 根据 command 执行相应操作
};

// 跳转到搜索页面
const goToSearchPage = () => {
  router.push('/search');
};
</script>

<style scoped>
.site-header {
  background-color: #007bff;
  color: #EFF2F9;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  margin-left: 20px;
}

.logo-img {
  height: 48px;
}

.header {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 10px 0; /* 添加上下内边距 */
  background-color: #f8f9fa; /* 可根据需要调整背景颜色 */
  height: 88px; /* Header 的高度 */
  margin: 0 auto; /* 设置 margin 为 auto 以确保居中 */
}

.logo {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 宽度占满父容器 */
}

.header-logo {
  height: 48px; /* 设置 Logo 高度 */
  margin: 0 auto; /* 确保水平居中 */
}

/* 这里是导航的样式 */
.main-nav {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 29px 0 rgba(60, 71, 97, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-list {
  background-color: transparent;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 80%;
}

.menu-list .el-menu-item {
  color: #222020;
  font-size: 14px;
  padding: 0 10px;
  white-space: nowrap;
  transition: color 0.3s;
}

.menu-list .el-menu-item:hover {
  color: #477ab5;
}

.menu-list .menu-text {
  display: block;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  letter-spacing: 1px;
}

.nav-button {
  background-color: #f5f5f5;
  border: none;
  border-radius: 5px;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.nav-button:hover {
  background-color: #e0e0e0;
}

.search-user {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-center-button {
  margin-left: 20px;
}

/* 搜索按钮样式 */
.search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin-right: 20px;
  border: 1px solid transparent; /* 默认透明边框 */
  border-radius: 20px; /* 圆角 */
  background-color: #f5f5f5; /* 淡灰色背景 */
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.search-button:hover,
.search-button:focus {
  border-color: #dcdcdc; /* 鼠标悬停时的边框颜色 */
  background-color: #eaeaea; /* 鼠标悬停时的背景颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.search-icon {
  color: #6c757d; /* 图标颜色 */
  transition: transform 0.3s, color 0.3s;
}

.search-button:hover .search-icon,
.search-button:focus .search-icon {
  color: #477ab5; /* 鼠标悬停时的图标颜色 */
  transform: scale(1.2); /* 放大图标 */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 用户名样式 */
.username {
  margin-left: 10px; /* 与头像保持一定距离 */
  font-size: 16px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
  color: #333; /* 字体颜色 */
  line-height: 1.2; /* 行高 */
  white-space: nowrap; /* 防止换行 */
  transition: color 0.3s, transform 0.3s; /* 添加过渡效果 */
}

.username:hover {
  color: #477ab5; /* 鼠标悬停时的颜色 */
  transform: scale(1.05); /* 微微放大 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .logo-container {
    margin-bottom: 10px;
    margin-left: 0;
  }

  .main-nav {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 29px 0 rgba(60, 71, 97, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .menu-list {
    flex-direction: row;
    overflow-x: auto;
    padding: 10px 0;
  }

  .menu-list .el-menu-item {
    font-size: 12px; /* 移动端字体大小 */
    padding: 0 12px;
  }

  .search-user .el-input:focus-within {
    width: 50px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #999;
  }

  .header {
    height: 60px; /* 调整小屏幕下的 header 高度 */
  }

  .header-logo {
    height: 40px; /* 调整小屏幕下的 Logo 高度 */
  }

  .username {
    font-size: 14px; /* 小屏幕下的字体大小 */
  }
}
</style>